<template>
  <el-scrollbar></el-scrollbar>
  <div class="all">
    <div id="twoBox" class="drag-two-box">
      <div id="menu" class="menu">
        <LeftMenu></LeftMenu>
      </div>
      <div id="twoleft" class="drag-two-left">
        <ShowMarkDown></ShowMarkDown>
      </div>
      <div id="tworesize" class="drag-two-resize">
        ⋮
      </div>
      <div id="tworight" class="drag-two-right">
        <CodeMirror></CodeMirror>
      </div>
    </div>
  </div>
  <div class="bottomdiv">
    <BottomSelect></BottomSelect>
  </div>
</template>
<script>
import {ref} from "vue";
import {dragTwoColDiv} from "./ItemView.js";
import ShowMarkDown from '../components/ShowMarkDown.vue'
import CodeMirror from '../components/CodeMirror.vue'
import {Codemirror} from "vue-codemirror";
import LeftMenu from '../components/LeftMenu.vue'
import {useStore} from "vuex";
import axios from "axios";
import BottomSelect from '../components/BottomSelect.vue'

export default {
  data() {
    return {};
  },
  mounted() {
    dragTwoColDiv("twoBox", "twoleft", "tworesize", "tworight", "menu");
  },
  name: 'ItemView',
  components: {
    ShowMarkDown,
    CodeMirror,
    LeftMenu,
    BottomSelect,
  },
  setup() {
    const item = ref();
    const store = useStore();
    const getitem = () => {
      axios
          .get(store.state.addr + "/question?id=1")
          .then(function (response) {
            item.value = response.data.data;
            console.log(item.value);
          })
          .catch(function () {
            ElMessage({
              showClose: true,
              message: "数据异常",
              type: "error",
            });
          });
    }
    return {
      getitem
    }
  }
};
</script>

<style lang="scss" scoped>
#app {
  height: 100%;
}

/*两列 */
#twoBox {
  display: flex;
}

#twoleft {
  width: calc(20% - 10px);
}

#tworesize {
  width: 5px;
  cursor: w-resize;
}

#tworight {
  width: 80%;
}

// 辅助修饰
.all {
  width: 100%;
  height: 100%;
  list-style: none;
}

.drag-two-box {
  width: 100%;
  display: flex;

  .menu{
    height: 100%;
  }

  .drag-two-left {
    height: 100%;
  }

  .drag-two-right {
    height: 100%;
  }

  .drag-two-resize {
    cursor: col-resize;
    float: left;
    position: relative;
    background-color: #d6d6d6;
    border-radius: 5px;
    width: 4px;
    height: 650px;
    background-size: cover;
    background-position: center;
    color: white;
    font-size: 30px;
    /* 父容器开启flex布局 */
    display: flex;
    /* 水平垂直居中 */
    justify-content: center;
    align-items: center;
  }

  .drag-two-resize:hover {
    color: #444444;
  }
}

.bottomdiv {
  margin-top: 5px;
  height: 50px;
  width: 100%;
}
</style>
